<template>
  <div class="auto-card-container" :style="state.cardStyle">
    <div class="c-header" v-if="state.showTitle" :style="state.headerStyle">
      <div class="h-text">{{state.titleText}}</div>
      <slot name="header"></slot>
    </div>
    <div class="divider"></div>
    <div class="c-body" :style="state.bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive } from 'vue';

export default defineComponent({
  name: 'AutoCard',
  props: {
    showTitle: Boolean,
    titleText: {
      type: String,
      default: '',
    },
    cardPadding: {
      type: Number,
      default: 0,
    },
    headerPadding: {
      type: Number,
      default: 6,
    },
    bodyPadding: {
      type: Number,
      default: 0,
    },
    backgroundColor: {
      type: String,
      default: '#fff',
    },
    borderRadius: {
      type: Number,
      default: 3,
    },
    fontSize: {
      type: Number,
      default: 16,
    },
    headerHeight: {
      type: Number,
      default: 50,
    },
    fontColor: {
      type: String,
      default: 'rgba(0,0,0,.85)',
    }
  },
  setup(props) {
    const state = reactive({
      showTitle: computed(() => props.showTitle),
      titleText: computed(() => props.titleText),
      cardStyle: computed(() => ({
        background: props.backgroundColor,
        borderRadius: `${props.borderRadius}px`,
        fontSize: `${props.fontSize}px`,
        color: props.fontColor,
        padding: `${props.cardPadding}px`,
      })),
      headerStyle: computed(() => ({
        maxHeight: `${props.headerHeight}px`,
        minHeight: `${props.headerHeight}px`,
        padding: `${props.headerPadding}px`,
      })),
      bodyStyle: computed(() => ({
        padding: `${props.bodyPadding}px`,
      })),
    });
    return {
      state
    };
  },
});
</script>

<style lang="less" scoped>
.auto-card-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
  transition: all .3s;
  font-variant: tabular-nums;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  box-sizing: border-box;
  .c-header {
    flex: 1;
    display: flex;
    align-items: center;
    //border-bottom: 1px solid #f0f0f0;
    overflow: auto;
    box-sizing: border-box;
    .h-text {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .c-body {
    flex: 1;
    font-size: 14px;
    overflow: auto;
    box-sizing: border-box;
  }
  .divider {
    width: 93%;
    border-bottom: 1px solid #f0f0f0;
    margin: 0 auto;
  }
}
</style>
